
<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="5">
            <el-form-item label="订单编号" label-width="80px">
              <el-input v-model="orderNum" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="产品名称" label-width="80px">
              <el-input v-model="orderName" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户ID" label-width="100px">
              <el-input v-model="userNum" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col v-show="platformArr.length > 1" :span="5">
            <el-form-item label="所属业务平台" label-width="100px">
              <el-select v-model="platform" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option
                  v-for="item of platformArr"
                  :key="item.idVal"
                  :value="item.idVal"
                  :label="item.powerName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item label="订单状态" label-width="100px">
              <el-select v-model="orderStatus" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of buyStatus" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="2" class="flexd">
            <el-button
              v-powerbtn="{power:'business-orderTable-search'}"
              size="mini"
              round
              type="primary"
              icon="el-icon-search"
              @click="loadList"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="5">
            <el-form-item label="实付金额" label-width="80px">
              <el-input ref="vipHeight" v-model="price" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产品原价" label-width="80px">
              <el-input v-model="original" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单类型" label-width="100px">
              <el-select v-model="orderType" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of buyType" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="是否自动续订" label-width="100px">
              <el-select v-model="pisGoon" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option value="0" label="是" />
                <el-option value="1" label="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="flexd">
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="订购时间" label-width="80px">
              <el-date-picker
                v-model="startDate"
                :picker-options="pickerOptions1"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                @change="checkStartTime"
              />
              至
              <el-date-picker
                v-model="endDate"
                :picker-options="pickerOptions2"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                class="timeLength"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="支付渠道" label-width="100px">
              <el-select v-model="payMode" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of pay" :key="item.billingChannelId" :value="item.billingChannelId" :label="item.billingChannelName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="addBtns">
      <!-- <el-button
        type="primary"
        size="mini"
        icon="el-icon-circle-close"
        @click="cancelBuy"
      >取消续订</el-button>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-error"
        @click="cancelDing"
      >取消订购</el-button> -->
      <el-button
        v-powerbtn="{power:'business-orderTable-download'}"
        type="primary"
        size="mini"
        round
        icon="el-icon-download"
        @click="downLoad"
      >导出</el-button>
    </div>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <!-- @selection-change="handleSelectionChange"
        <el-table-column
          type="selection"
          width="55"
        /> -->

        <el-table-column label="订单编号">
          <template slot-scope="scopev">
            <el-popover v-if="scopev.row.oNumber" :content="scopev.row.oNumber" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scopev.row.oNumber }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品名称">
          <template slot-scope="scopeo">
            <el-popover v-if="scopeo.row.pName" :content="scopeo.row.pName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scopeo.row.pName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="订购时间">
          <template slot-scope="scopei">
            <el-popover v-if="scopei.row.orderTime" :content="scopei.row.orderTime" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scopei.row.orderTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="实付金额">
          <template slot-scope="scopeu">
            <el-popover v-if="scopeu.row.payPrice" :content="scopeu.row.payPrice" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scopeu.row.payPrice }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品原价">
          <template slot-scope="scopey">
            <el-popover v-if="scopey.row.constPrice" :content="scopey.row.constPrice" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scopey.row.constPrice }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="订单类型">
          <template slot-scope="scopet">
            {{ scopet.row.orderTypeName }}
          </template>
        </el-table-column>

        <!-- <el-table-column label="订单状态">
          <template slot-scope="scope">
            {{ scope.row.Paystatus }}
          </template>
        </el-table-column> -->
        <el-table-column label="是否自动续订">
          <template slot-scope="scoper">
            {{ scoper.row.pisGoon === '0' ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="用户ID">
          <template slot-scope="scopee">
            {{ scopee.row.userId }}
          </template>
        </el-table-column>

        <el-table-column label="所属业务平台">
          <template slot-scope="scopew">
            {{ scopew.row.platName }}
          </template>
        </el-table-column>

        <el-table-column label="支付渠道">
          <template slot-scope="scopeq">
            {{ scopeq.row.payCode }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="260">
          <template slot-scope="scopes">
            <span v-show="scopes.row.pisGoon === '1'">
              <el-button
                v-powerbtn="{power:'business-orderTable-cancelOrder'}"
                type="primary"
                round
                plain
                size="mini"
                @click="cancelDing(scopes.row.oNumber)"
              >取消订购</el-button>
            </span>
            <span v-show="scopes.row.pisGoon !== '1'">
              <el-button
                v-powerbtn="{power:'business-orderTable-cancelGoon'}"
                type="primary"
                style="margin-left:0"
                round
                plain
                size="mini"
                @click="cancelBuy(scopes.row.oNumber)"
              >取消续订</el-button>
            </span>
            <el-button
              v-powerbtn="{power:'business-orderTable-find'}"
              round
              type="primary"
              plain
              style="margin-left:0"
              size="mini"
              @click="watchs(scopes.row.oNumber, scopes)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <watch-info :watch-dialog="watchDialog" :watch-id="watchId" :scope-info="scope" @closeWatch="closeWatch" />
    <cancel-buy :cancel-dialog="cancelDialog" :num-arr="arr" @closeCancel="closeCancel" />
  </div>
</template>

<script>
import { getList, cancelBuys } from '@/api/buyList.js'
import { getSelectS } from '@/api/product.js'
import { mapGetters } from 'vuex'
import powerbtn from '@/directive/powerbtn/index.js'
import { download } from '@/utils/download.js'
import { selectDown } from '@/api/expenses.js'
import watchInfo from './components/watch.vue'
import cancelBuy from './components/cancel.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    watchInfo: watchInfo,
    cancelBuy: cancelBuy
  },
  data() {
    return {
      list: [], // 请求列表
      scope: {},
      pisGoon: '',
      orderNum: '', // 订单编号
      orderName: '', // 订单名称
      userNum: '', // 用户编号
      price: '', // 价格
      original: '', // 产品原价
      orderType: '', // 订单类型
      orderStatus: '', // 订单状态
      payMode: '', // 支付渠道
      platform: '', // 所属业务平台
      pay: [], // 支付渠道下拉
      pageid: 1, // 当前页数
      buyType: [],
      cancelDialog: false,
      buyStatus: [],
      payChannel: [],
      platformArr: [],
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      watchId: '', // 策略id
      count: 0, // 总数量
      addDialog: false, // 新增遮罩
      paySelect: [],
      tiemLen: '',
      arr: {
        oNumber: ''
      }, // 多选
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  mounted() {
    this.$nextTick(() => {
      var len = this.$refs.vipHeight.$el.offsetWidth
      console.log(len)
      this.tiemLen = {
        'width': len + 'px'
      }
    })
    this.platformArr = this.plat
    if (this.platformArr.length > 1) {
      this.platformArr.forEach(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
        this.payChannel.push(item.idVal)
      })
      this.getSelect()
    }
    if (this.platformArr.length === 1) {
      var sina = this.platformArr[0].powerCode.lastIndexOf('-')
      this.platformId = this.platformArr[0].powerCode.substr(sina + 1)
      this.payChannel = this.platformArr[0].powerCode.substr(sina + 1)
      this.getSelect(true)
    }
    // this.loadList()
  },
  methods: {
    closeCancel(val) {
      this.cancelDialog = false
      if (val === true) {
        this.loadList()
      }
    },
    // 请求支付渠道下拉
    getSelect(status) {
      selectDown({ platformId: Array.isArray(this.payChannel) ? this.payChannel.join(',') : this.payChannel }).then(res => {
        if (res.resultCode === '0000') {
          this.pay = res.data.list
          // status 订单状态
          getSelectS({ functionType: 'status' }).then(res => {
            this.buyStatus = res.data.list
            // orderType 订单类型
            getSelectS({ functionType: 'orderType' }).then(res => {
              this.buyType = res.data.list
              this.loadList(status)
            })
          })
        }
      })
    },
    // 请求列表
    loadList(status) {
      this.pageid = 1
      if (status === true) {
        this.platform = this.platformId
      }
      const request = {
        oNumber: this.orderNum,
        pName: this.orderName,
        userId: this.userNum,
        payPrice: this.price,
        constPrice: this.original,
        orderType: this.orderType,
        // status: this.orderStatus,
        startOrderTime: this.startDate,
        endOrderTime: this.endDate,
        payCode: this.payMode,
        platformId: this.platform,
        pisGoon: this.pisGoon,
        pageNum: 1,
        limit: 20
      }
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          if (this.list.length > 0) {
            this.buyType.forEach(item => {
              this.list.forEach(arr => {
                if (arr.orderType === item.typeId) {
                  arr.orderTypeName = item.typeName
                  console.log(arr)
                }
              })
            })
            this.buyStatus.forEach(item => {
              this.list.forEach(arr => {
                if (arr.status === item.typeId) {
                  arr.Paystatus = item.typeName
                }
              })
            })
          }
          this.count = parseInt(res.data.total) // 总数量
          // this.pageid = parseInt(res.data.list[0].pageNum) // 当前页数
          this.status = true
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    downLoad() {
      const request = {
        oNumber: this.orderNum,
        pName: this.orderName,
        userId: this.userNum,
        payPrice: this.price,
        constPrice: this.original,
        orderType: this.orderType,
        status: this.orderStatus,
        startOrderTime: this.startDate,
        endOrderTime: this.endDate,
        payCode: this.payMode,
        terminalType: this.platform
      }
      download(request, '/orderManage/orderListDownload.do', '订单列表')
    },
    reset() {
      if (this.platformArr.length > 1) {
        this.platform = ''
      }
      this.orderNum = ''
      this.pisGoon = ''
      this.orderName = ''
      this.userNum = ''
      this.price = ''
      this.original = ''
      this.orderType = ''
      this.orderStatus = ''
      this.startDate = ''
      this.endDate = ''
      this.payMode = ''
    },

    // 取消续订
    cancelBuy(val) {
      // if (this.arr.length > 0) {
      this.$confirm('确认取消续订吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.arr.oNumber = val
        cancelBuys([this.arr]).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '取消成功'
            })
            this.loadList()
          } else {
            this.$message({
              type: 'success',
              message: '取消失败'
            })
          }
        })
      })
      /* } else {
        this.$message({
          type: 'error',
          message: '请勾选产品'
        })
      } */
    },

    // 取消订购
    cancelDing(val) {
      this.arr.oNumber = val
      // if (this.arr.length > 0) {
      this.cancelDialog = true
      // orderForms: this.arr, outRemark: value.value
      /* } else {
        this.$message({
          type: 'error',
          message: '请勾选产品'
        })
      } */
    },
    // 多选
    /* handleSelectionChange(val) {
      if (val.length > 0) {
        this.arr = val.map(item => {
          return { oNumber: item.oNumber }
        })
      }
    }, */
    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        oNumber: this.orderNum,
        pName: this.orderName,
        userId: this.userNum,
        payPrice: this.price,
        constPrice: this.original,
        orderType: this.orderType,
        // status: this.orderStatus,
        startOrderTime: this.startDate,
        endOrderTime: this.endDate,
        payCode: this.payMode,
        platformId: this.platform,
        pisGoon: this.pisGoon,
        pageNum: 1, // 当前页数
        limit: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          if (this.list.length > 0) {
            this.buyType.forEach(item => {
              this.list.forEach(arr => {
                if (arr.orderType === item.typeId) {
                  arr.orderTypeName = item.typeName
                  console.log(arr)
                }
              })
            })
            this.buyStatus.forEach(item => {
              this.list.forEach(arr => {
                if (arr.status === item.typeId) {
                  arr.Paystatus = item.typeName
                }
              })
            })
          }
          this.count = parseInt(res.data.total) // 总数量
          // this.pageid = parseInt(res.data.list[0].pageNum) // 当前页数
          this.status = true
        }
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        oNumber: this.orderNum,
        pName: this.orderName,
        userId: this.userNum,
        payPrice: this.price,
        constPrice: this.original,
        orderType: this.orderType,
        // status: this.orderStatus,
        startOrderTime: this.startDate,
        endOrderTime: this.endDate,
        payCode: this.payMode,
        platformId: this.platform,
        pisGoon: this.pisGoon,
        pageNum: num, // 当前页数
        limit: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          if (this.list.length > 0) {
            this.buyType.forEach(item => {
              this.list.forEach(arr => {
                if (arr.orderType === item.typeId) {
                  arr.orderTypeName = item.typeName
                  console.log(arr)
                }
              })
            })
            this.buyStatus.forEach(item => {
              this.list.forEach(arr => {
                if (arr.status === item.typeId) {
                  arr.Paystatus = item.typeName
                }
              })
            })
          }
          this.count = parseInt(res.data.total) // 总数量
          // this.pageid = parseInt(res.data.list[0].pageNum) // 当前页数
          this.status = true
        }
      })
      // }
    },

    // 查看
    watchs(id, scope) {
      this.watchDialog = true
      this.watchId = id
      this.scope = scope
    },

    edit(id) {
      this.editDialog = true
      this.watchId = parseInt(id)
      this.paySelect = this.pay
    },

    // 关闭查看回调
    closeWatch() {
      this.watchDialog = false
    },

    // 新增
    add() {
      this.addDialog = true
      this.paySelect = this.pay
    },

    // 关闭新增回调
    closeAdd() {
      this.addDialog = false
    },

    closeEdit() {
      this.editDialog = false
    }
  }
}
</script>

<style scoped>
.addBtns{
  margin: 5px 0;
}
.timeLength{
  width: 37.5% !important;
}
</style>
